Code Garden

Appearance

js-07 字符串、对象 ​

一、字符串 ​

查找 indexof ​

  1. 变量.charAt(n) 返回指定下标对应的字符，

    用中括号的形式使用比较多：变量[n]: IE7及以下不支持；

  2. s.indexOf(value,[,num]);

    • 一个参数：返回指定字符第一次出现的位置对应下标，没有时返回-1；

    • 两个参数：指定位置开始查找前面的字符，传入负数，默认为0；

      如果需要查找是否有敏感词，可以判断是否不等于-1

  3. s.lastindexOf("w"); 从后往左找，返回指定字符或字符串最后一次出现的位置；不影响下标，还是一样的，从左到右；

截取 slice ​

  1. slice([n],[m])；

    js
    var str = 'abcdefg'
str.slice() // => abcdefg    不填参数，返回全部；
str.slice(1) // => bcdefg    只有n时，从n开始截取到结束
str.slice(1, 3) // => bc      n,m时, 从n截取到m, 不包括m
str.slice(2, 1) // => empty  n>m时, 返回空字符串
str.slice(-1) // => g        负数从后面开始截取指定的负值数量

  2. substring([n],[m])；

    与slice区别为：n>m自动转换下标，负数从0开始

    js
    var str = 'abcdefg'
str.substring(3, 1) // => bc     n>m时, 自动转换下标
str.substring(-1) // => abcdefg  负数从0开始

  3. substr(index，num)；

    与前两个区别从下标截取多少个；

    js
    var str = 'abcdefg'
str.substr(1, 3) // => bcd     n,m时, 从n截取m个
str.substr(-1)  // => g        负数时, 从后面截取

分割 split ​

split(str,m)；

以指定字符分割成数组，可以规定分割多少个，其余被省略；

  • 不填参数时：一个数组；

  • 一对引号：分割每个字符；

数组的方法：

字符串变数组：split();

数组变字符串：join();

替换 replace ​

变量.replace(被替换的字符，新字符)；

如果需要多个可以：变量.replace().replace();

返回被替换的字符，只能替换一次；

比较 localeCompare ​

字符串是一位一位的比较，比如a="18",b="2"，则b>a;

  • 如果字符串在字母表中应该排在字符串参数之前，返回负数

  • 如果相等，返回0

  • 如果在参数之后，返回正数；

js
var stringV = 'yellow'
stringV.localeCompare('brick') // 1
stringV.localeCompare('yellow') // 0
stringV.localeCompare('zoo') // -1

转换 Unicode码 ​

将字符串转换成Unicode码：charCodeAt（传入下标）

将Unicode码转换成字符串：String.fromChartCode

js
var str = 'hello'
str.charCodeAt(0) // 104
str.charCodeAt(4) // 111
String.fromCharCode(104,101,108,108,111) // hello

大小写 ​

  • toLowerCase();直接转变小写；

  • toUpperCase(); 转换成大写；

  • toLocaleLowerCase(); 本地转换小写；

  • toLocaleUpperCase(); 本地转换成大写；

trim ​

清除左右空格；

str.trim()

二、字符串扩展 ​

  • includes(str) : 判断是否包含指定的字符串 true|false === indexOf

    也可以用于数组；仅适用于普通类型的数组，不包含对象的数组；

  • startsWith(str) : 判断是否以指定字符串开头

  • endsWith(str) : 判断是否以指定字符串结尾

  • repeat(count) : 重复指定次数 返回一个新的字符串

padStart、 padEnd ​

  1. 接收两个参数，第一个参数为最小长度，第二个参数为补全字符串；

    '1'.padStart(2,'0') //返回 '01'

    '1'.padEnd(2,'0') //返回 '10'

  2. 如果原字符串等于或大于指定的最小长度，则返回原字符串；

    '10'.padStart(2,'0') //返回 '10'

  3. 如果原字符串的长度小于补全字符串的长度，则截去超出位数的补全字符串；

    '09-12'.padStart(10, 'YYYY-MM-DD') // "YYYY-09-12"

    '09-12'.padEnd(10, 'YYYY-MM-DD') // "09-12YYYY-"

字符串的练习：

js
//网站常用
var str = '?user=18788889999&psd=abcdefgg123&code=Z4dCU4&message=';
var str = str.split("?")[1].split("&")     //先以?号拆再以&拆
var obj = {};  //声明一个对象 保留数据
for(var i=0;i<str.length;i++){
    var ss = str[i].split("=");
    if(ss[0] == "user" || ss[0] == "psd"){    //如果是user或psd就保留
        obj[ss[0]] = ss[1];
    }
}

将字符串倒过来：

js
var str = "Hello Word!"
str.split("").reverse().join('')

三、字符串的html方法 ​

不建议使用这些方法，因为它们创建的标签通常无法表达语义；

  • big标签：big()
  • b标签：bold()
  • i标签：italics()
  • tt标签：fixed()
  • font color标签：fontcolor(color)
  • font size标签：fontsize(size)
  • a标签：link(url)
  • a name标签：anchor(name)；
  • small标签：small()
  • strike标签：strike()
  • sub标签：sub()
  • sup标签：sup()
js
'wyy'.link('http://wyy.heny.vip') // <a href='http://wyy.heny.vip'>wyy</a>
'str'.fontcolor('red') // <font color='red'>str</font>

四、URI编码 ​

  • encodeURI：主要是针对整体URI进行编码，不会对本身属于URI的特殊字符进行编码，例如冒号、正斜杠、问号和井字号；
  • encodeURIComponent：主要针对URI的某一段进行编码
  • decodeURI：对encodeURI进行解码
  • decodeURIComponent：对encodeURIComponent进行解码
js
var uri = 'http://www.wrox.com/illegal value.html#start'
encodeURI(uri) //http://www.wrox.com/illegal%20value.html#start
encodeURIComponent(uri) // http%3A%2F%2Fwww.wrox.com%2Fillegal%20value.html%23start

实践中常用encodeURIComponent；

五、对象方法 ​

原型对象 ​

  1. Object.defineProperty(obj,attr,descriptor)

    修改或添加一个属性，通过defineProperty可以劫持一个对象的修改；

    每个对象值都有三个属性：configurable、writable、enumerable；

    如果直接用defineProperty创建的属性，将默认三个属性均为false，直接创建的对象三个属性默认为true

    js
    var person = {}
Object.defineProperty(person, 'name', {
    configurable: false, // configurable只能设置一次，再次设置将报错
    writable: false,
    enumerable: false,
    value: 'hny'
})

  2. Object.defineProperties(obj,props)

    添加或修改多个新属性；

    js
    var person = {}
Object.defineProperties(person, {
    edition: {
        writable: true,
        value: 1
    },
    age: {
        writable: true,
        value: 18
    }
})

  3. Object.getOwnPropertyDescriptor(obj, props)

    取得给定属性的描述符；

  4. obj.isPrototypeOf

    检测对象是否是另一个对象的原型

    js
    var obj = {name:'haha'}
var obj2 = Object.create(obj)
obj.isPrototypeOf(obj)

// 构造函数使用原型去对比;
Child.prototype.isPrototypeOf(obj)

  5. Object.getPrototypeOf()

    获取一个对象的原型；

  6. Object.setPrototypeOf(obj1,obj2)

    将obj2作为原型放到obj1身上，会直接修改obj1返回一个obj2；

  7. obj.hasOwnProperty()

    判断某个属性是否存在于某个对象当中，也可以使用in

    hasOwnProperty不会判断到原型去，

    in 操作符判断对象能否访问给定属性时返回true，否则返回false；

    判断一个对象是原型的属性：

    js
    function hasPrototypeProperty(obj, name) {
    // 不是实例身上的，in操作符判断能否获取到值;
    return !obj.hasOwnProperty(name) && name in obj
}

  8. Object.create

    返回一个新对象，将传入的对象放到新对象的原型上，可以直接通过；

    js
    let obj = {name: 'hhh'}
let obj2 = Object.create(obj)  // {}
obj2.name  // hhh

  9. Object.getOwnpropertyNames()

    返回对象自身的全部属性名称；

其他方法 ​

  1. Object.is(value1,value2)

    判断两个值是否相等，通过Object.is判断，两个NaN是相等的；

    js
    console.log(Object.is(NaN,Number('a')))  // true

  2. Object.assign(target,source.......)

    合并对象，返回一个新对象，将多个source对象组合到target对象身上；

  3. Object.keys

    以数组的形式返回对象所有的key值，通过遍历返回的数组，再次调用原来的对象，取得所有的value值;

    该方法不会返回不可枚举的属性；

    js
    var obj = {a:1,b:2,c:3,d:4}
let objArr = Object.keys(obj).map(item=>({
    [item]:obj[item]
}))
// [{a:1},{b:2}....]

  4. Object.values

    以数组的形式返回对象所有的value值;

  5. Object.entries

    以二维数组的形式返回传入的对象，相当于es6里面的map对象；

  6. Object.fromEntries

    以对象的形式返回传入的二维数组对象；

  7. Object.freeze(obj)

    冻结一个对象，一个被冻结的对象不能被修改;（只是冻结值，引用不会被冻结）

    不能被修改是不能直接修改对象的基本类型的值，如果对象被重新赋值，还是可以被修改的；

    js
    var obj = {name: 'hhh'}
Object.freeze(obj)
obj.name = 'sss'
console.log(obj) // {name: 'hhh'}

obj = {name: 'sss'}
obj.name = 'hny'
console.log(obj) // {name: 'hny'}

  8. Object.isFrozen(obj)

    判断一个对象是否是冻结状态

高频面试题 ​

● js 有哪些内置对象？

● 把下面的字符串去重，并去除掉特殊字符按照数字在前字母在后的顺序排序字符串

如下：“1233fddfd&3434fdsaff&454545&4545444rfdsfds&545gdsgs”

● 截取字符串“abcdefg”中的 def。

● 有这样一个 url：http://item.taobo.com/item.html?a=1&b=2&c=&d=xxx&e, 请写 一段 js 程序提取 url 中各个 get 参数 ( 参数名和参数个数不确定 )，将其 key-value 形式返回到一个 json 结构中，如

● 判断一个字符串中出现次数最多的字符，并且统计次数。

Released under the MIT License.

Copyright © 2022-备案号：京ICP备2022004926号-1